import React, { useEffect, useMemo, useState } from 'react';
import { Menu } from 'antd';
import router from '@/router';
import { routerListToMenuList } from '@/utils';
// import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
// import { ItemType, MenuItemType } from 'antd/es/menu/hooks/useItems';

interface IProps {
  collapsed: boolean;
}

const SideMenu: React.FC<IProps> = prop => {
  // const [currentPath, setCurrentPath] = useState(['/']);
  const [currentPath, setCurrentPath] = useState(['/']);
  // const middleSetCurrentPath = useCallback((value: Array<string>) => {
  //   setCurrentPath(value)
  // }, [])
  const navigate = useNavigate();
  const menuList = useMemo(() => routerListToMenuList(router.routes), []);

  useEffect(() => {
    const path = router.state.location.pathname.substring(1) ? router.state.location.pathname.substring(1) : '/';
    setCurrentPath([path])
  }, [])

  const onMenuCilck = (item: any) => {
    navigate(item.key);
  };

  const onMenuSelect = (value: any) => {
    setCurrentPath(value.selectedKeys)
  };

  return (
    <>
      <div className='app-title-container'>
        <img className='app-logo' src='logo.png' alt='logo'></img>
        {!prop.collapsed && <span className='app-title'>REACT</span>}
      </div>
      <Menu
        theme='dark'
        mode='inline'
        onClick={onMenuCilck}
        onSelect={onMenuSelect}
        selectedKeys={currentPath}
        // defaultSelectedKeys={['1']}
        items={menuList}
      />
    </>
  );
};

export default SideMenu;
